<template>
	<view :class="themeName">
		<u-tabs font-size="28" name="tabsName" inactive-color="#333" :active-color="themeColor" :list="tabsList"
			:is-scroll="false" :current="tabsIndex" @change="handleTapChange">
		</u-tabs>
		<mescroll-uni ref="mescrollRef" bgColor="white" margin="5rpx" :fixed="false" :up="upOption" @init="mescrollInit"
			@down="downCallback" @up="upCallback" :bottom="30" :down="{ auto: false }">
			<block v-if="tabsIndex == 0">
				<!-- 当前是发票记录 -->
				<view class="invoice-panel" v-for="(item, index) in tabsList[0].list" :key="index">
					<view class="order-info-panel">
						<u-image class="goods-pic" :src="item.order_goods.goods_image" mode="aspectFit" :width="88"
							:height="88"></u-image>
						<view class="goods-name">
							<view>{{item.order_goods.goods_name}} {{item.order_goods.spec_value_str}}</view>
							<view class="m-t-10">{{$zhTran('共 '+item.order_goods_num+' 件商品')}}</view>
						</view>
					</view>
					<view class="invoice-info-panel">
						<view class="left-panel">
							<view class="invoice-type">{{item.title_type_desc+item.type_desc}}</view>
							<view class="apply-time">{{ $zhTran('申请时间 ')+item.create_time }}</view>
						</view>
						<view class="right-panel">
							<view class="price">￥{{item.invoice_amount}}</view>
						</view>
					</view>
					<view class="footer-panel flex">
						<view class="invoice-status">{{item.status_desc}}</view>
						<view class="btn detail-btn flex" @click="toOrderDetail(item.order_id)">{{ $zhTran('查看详情') }}
						</view>
					</view>
				</view>
				<w-jishuzhichi :class="[{'jishuzhichi-nodata':currentTabList.length == 0}]" />
			</block>
			<block v-else>
				<!-- 发票抬头记录 -->
				<block v-for="(item, index) in tabsList[1].list" :key="index">
					<invoice-title :card="item" @refresh="refreshOrderData"></invoice-title>
				</block>
			</block>
		</mescroll-uni>
		<view class="tittle-add-panel" :style="{ background: themeColor }" v-if="tabsIndex==1" @tap="addTitle">
			添加新抬头
		</view>
	</view>
</template>

<script>
	import {
		apiUserIncoiceLists,
		apiOrderIncoiceLists
	} from "@/api/invoice"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import invoiceTitle from "@/bundle3/components/invoice/invoice-title.vue";
	export default {
		components: {
			invoiceTitle,
		},
		mixins: [MescrollMixin],
		data() {
			return {
				tabsIndex: 0,
				// Tabs列表
				tabsList: [{
					sign: 'record',
					name: this.$zhTran('发票记录'),
					list: [],
				}, {
					sign: 'title',
					name: this.$zhTran('抬头管理'),
					list: [],
				}, ],
				upOption: {
					auto: false,
					noMoreSize: 3,
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
						tip: this.$zhTran('暂无订单~'),
						fixed: true
					}
				},
				allow: {}
			};
		},
		computed: {
			// 当前Tab项
			currentTab() {
				return this.tabsList[this.tabsIndex] || {}
			},

			currentTabList() {
				if (this.tabsList[this.tabsIndex] == undefined) return []
				return this.tabsList[this.tabsIndex].list || []
			},

			// 映射Tabs项
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},
		methods: {
			handleTapChange(index) {
				this.tabsIndex = index
				this.refreshOrderData()
			},
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				const sign = this.currentTab.sign
				const tab = this.mapTabsItem(sign)
				if (sign == 'title') {
					this.getUserInvoiceList(tab, num, size)
				} else {
					this.getOrderInvoiceList(tab, num, size)
				}
			},
			getOrderInvoiceList(tab, num, size) {
				apiOrderIncoiceLists({
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					tab.list = this.$zhTran(tab.list)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			getUserInvoiceList(tab, num, size) {
				apiUserIncoiceLists({
					source: 'invoice',
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					tab.list = this.$zhTran(tab.list)
					this.allow = extend.allow
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			addTitle() {
				if (this.allow.title_type.length == 0) {
					this.$toast({
						title: '暂无可开票的抬头类型'
					})
					return
				}
				if (this.allow.type.length == 0) {
					this.$toast({
						title: '暂无可开票的发票类型'
					})
					return
				}
				this.$Router.push({
					path: "/bundle3/pages/invoice/add_invoice",
				})
			},
			toOrderDetail(order_id) {
				this.$Router.push({
					path: "/bundle2/pages/order_detail/order_detail",
					query: {
						order_id
					}
				})
			}


		},
		/* S lifecircle hook*/
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle),
				});
			}
			const options = this.$Route.query
			let current = options.current || 0
			this.handleTapChange(current)
		},
		/* E lifecircle hook*/
	};
</script>

<style lang="scss">
	.tittle-add-panel {
		width: 355px;
		height: 42px;
		border-radius: 800px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		position: fixed;
		left: 50%;
		bottom: 20px;
		transform: translateX(-50%);
		z-index: 99;

	}

	.invoice-panel {
		border-radius: 5px;
		padding: 16px;
		background: #fff;
		align-items: center;
		margin: 10px;

		.order-info-panel {
			display: flex;

			.goods-pic {
				border-radius: 2px;

			}

			.goods-name {
				width: 251px;
				color: rgba(51, 51, 51, 1);
				font-weight: 500;
				font-size: 13px;
				margin-left: 9px;
			}
		}

		.invoice-info-panel {
			padding: 14px;
			display: flex;
			align-content: center;
			justify-content: space-between;
			border-radius: 8px;
			background: rgba(245, 246, 248, 1);
			margin-top: 13px;
			margin-bottom: 15px;

			.left-panel {
				.invoice-type {
					font-size: 12px;
					font-weight: 700;
					color: rgba(51, 51, 51, 1);
					margin-bottom: 6px;
				}

				.apply-time {
					font-size: 12px;
					color: rgba(153, 153, 153, 1);
				}
			}

			.right-panel {
				display: flex;
				align-items: center;
				justify-content: center;

				.price {
					font-size: 15px;
					font-weight: 700;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.footer-panel {
			justify-content: space-between;
			align-content: center;

			.invoice-status {
				font-size: 14px;
				font-weight: 700;
			}

			.detail-btn {
				align-items: center;
				justify-content: center;
				width: 89px;
				height: 30px;
				border-radius: 100px;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(221, 221, 221, 1);
			}
		}
	}
</style>